import React, { Component } from 'react'
import { string, oneOfType, node } from 'prop-types'
import { withRouter, Route } from 'react-router-dom'
import './style.scss'

@withRouter
class Mylink extends Component {
  jumpUrl = url => {
    this.props.history.push(url)
  }

  render() {
    const { to, children, tag: Tag, activeClass } = this.props
    return (
      <Route
        path={to}
        children={route => {
          // console.log(route.match)
          let active = route.match ? activeClass : ''
          return (
            <Tag className={active} onClick={() => this.jumpUrl(to)}>
              {children}
            </Tag>
          )
        }}
      />
    )
  }
}

// props类型限制
Mylink.propTypes = {
  to: string.isRequired,
  children: oneOfType([string, node]),
  tag: string,
  activeClass: string
}

// 默认值
Mylink.defaultProps = {
  children: '导航',
  tag: 'a',
  activeClass: 'router-active'
}

export default Mylink
